{"componentChunkName":"component---src-templates-blog-post-js","path":"/Exploit Airtable inside your React app/","result":{"data":{"site":{"siteMetadata":{"title":"Nans' blogs"}},"markdownRemark":{"id":"cc9f888c-f03c-5bff-8fe4-31d8ff40316e","excerpt":"Intro At Karbon 🌱, we iterate fast and we are always looking for ways to improve our products and services.  We had the idea of building an idea box, allowing…","html":"<h2>Intro</h2>\n<p>At <a href=\"https://www.karbon.earth/\">Karbon 🌱</a>, we iterate fast and we are always looking for ways to improve our products and services. </p>\n<p>We had the idea of building an idea box, allowing users to create, share and vote for ideas of new features.</p>\n<p>This is the typical project where we have to store unsensitive data entered by users. However we wanted to avoid impacting the rest of our application (e.g we don’t want to change our database schema).</p>\n<p><a href=\"https://airtable.com/\">Airtable</a> is a great tool for this kind of usecase.</p>\n<h2>Let’s build this idea box ! 🗳️</h2>\n<p>Airtable provides an <a href=\"https://www.npmjs.com/package/airtable\">npm package</a> to interact with their API.\nHowever, since I was working with multiple tables (one for votes, another one for ideas), I found myself repeating a lot of boilerplate code.\nI landed on a <a href=\"https://www.npmjs.com/package/use-airtable\">hook</a> that seemed to provide a nice abstraction to interact with Airtable, but it had some bugs and the author didn’t seem to willing to spend time on it. So I decided to write my own hook.</p>\n<p>On top of fixing a few issues, I worked on the following points : </p>\n<ul>\n<li>provide an option to handle errors when fetching, updating or deleting data</li>\n<li>provide an option to filter records using Airtable’s <code class=\"language-text\">QueryParams</code></li>\n</ul>\n<h2>Usage 👩‍💻👨‍💻</h2>\n<p>Install the hook and Airtable’s package with your favorite package manager, for example npm :</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save airtable use-airtable-crud</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> records<span class=\"token punctuation\">,</span> createRecord<span class=\"token punctuation\">,</span> updateRecord<span class=\"token punctuation\">,</span> deleteRecord<span class=\"token punctuation\">,</span> getRecords<span class=\"token punctuation\">,</span> loading <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> <span class=\"token function\">useAirtable</span><span class=\"token punctuation\">(</span>\n    <span class=\"token string\">'TABLE_NAME'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token constant\">AIRTABLE_API_KEY</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'TABLE_BASE_ID'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span>\n      filterByFormula<span class=\"token operator\">:</span> <span class=\"token string\">'{myField} = TRUE()'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>You can find the source code of the hook <a href=\"https://github.com/NansD/use-airtable-crud\">here</a>.</p>\n<h2>Outro</h2>\n<p>I hope this hook can be useful for you too! Prototyping and iterating is a great way to learn new things.</p>","frontmatter":{"title":"Exploit Airtable inside your React app","date":"May 11, 2022","description":"I made simple hook to create, read, update and delete data from Airtable"}}},"pageContext":{"slug":"/Exploit Airtable inside your React app/","previous":{"fields":{"slug":"/Tech Hunter/"},"frontmatter":{"title":"Atelier tech hunter","tags":null}},"next":{"fields":{"slug":"/environmental-footprint/"},"frontmatter":{"title":"Face à la complexité de la crise environnementale, il faut faciliter les prises de décision","tags":["non-dev","environment","lca","acv","french 🇫🇷"]}}}},"staticQueryHashes":["2841359383","3145232782"]}